<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="search()">
      <el-form-item label="订单号">
        <br> <br>
        <el-input v-model="formInline.orderNumber" placeholder style="margin-left:-60px;width:200px"></el-input>
      </el-form-item>
  <el-form-item style="margin-left:500px;text-align:right;margin-top:100px;margin-bottom:20px">
    <el-button type="primary" @click="searchData()" size="mini" icon="el-icon-search">查询</el-button>
    <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">重置</el-button>
    <el-button type="warning" v-if="isShowExport" :loading="exportLoading" plain @click="exportExcel()" size="mini" icon="el-icon-download">导出门店支付情况</el-button>
  </el-form-item>
  </el-form>

  <el-table :data="tableData" :header-cell-style="{background:'#eef1f6',color:'#606266'}" style="width: 100%;margin-bottom: 20px;"
    row-key="goodsTypeId" border v-loading="loading" default-expand-all >
    <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
    <el-table-column :formatter="typeFormatter" label="日志类型" width="250" align="center"></el-table-column>
    <el-table-column prop="logInfo" label="详情" align="center" width="800" ></el-table-column>
    <el-table-column prop="logTime" label="时间" align="center" width="200" ></el-table-column>
  </el-table>


  <div class="block">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.current"
      :page-sizes="[10, 20, 30, 50, 100, 150, 200]" :page-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>

  </div>
</template>

<script>
  import {
    orderMessageList,
    getOrderPayData
  } from "@/api/goodStatement";
  import qs from "qs";
  export default {
    data() {
      return {
        tableData: [],
        listQuery: {
          current: 1,
          size: 10
        },
        logininfo: "",
        orgList: "",
        formInline: {
          orderNumber:""
        },
        loading: false,
        total: 0,

        exportLoading: false,
        isShowExport: false
      };
    },
    mounted() {
      const logininfo = localStorage.getItem("logininfo");
      const logininfoJson = logininfo ? JSON.parse(logininfo) : {};
      const account = logininfoJson.account ? logininfoJson.account : "";
      const userType = logininfoJson.userType ? logininfoJson.userType : "";

      if (userType == "1" && (account == "lzq" || account == "admin")) {
        this.isShowExport = true;
      }
    },
    methods: {
      /* 格式化收货地址 */
      typeFormatter(row, column) {
        let type = row.logType == 1 ? "支付下单" : row.logType == 2 ? "支付响应" :
          row.logType == 3 ? "支付查询" : row.logType == 4 ? "支付退款" :
          row.logType == 5 ? "退款查询" : row.logType == 6 ? "清分申请" :
          row.logType == 7 ? "清分查询" : row.logType == 8 ? "清分到账按日查询" :
          row.logType == 9 ? "清分到账按单查询" : row.logType == 10 ? "开户审核结果通知" :
          row.logType == 11 ? "手续费开票结果通知" : row.logType == 12 ? "工单反馈通知" : "";
        return type;
      },

      // 重置页码查询 查询
      searchData() {
        this.listQuery.current = 1;
        this.search();
      },
      //查询
      search() {
        this.loading = true;
        let data = {
          size: this.listQuery.size,
          current: this.listQuery.current,
          condition: {
            orderNumber:this.formInline.orderNumber
          }
        };
        orderMessageList(data).then(res => {
          this.total = res.total;
          this.tableData = res.records;
          this.loading = false;
        });
      },
      handleCurrentChange(val) {
        this.listQuery.current = val;
        this.search();
      },
      handleSizeChange(val) {
        this.listQuery.size = val;
        this.search();
      },
      kong() {
        this.formInline.orderNumber = "";
      },

      exportExcel() {
        this.exportLoading = true;
        getOrderPayData().then(res => {
          const link = document.createElement('a');
          let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
          link.style.display = 'none';
          //设置连接
          link.href = URL.createObjectURL(blob);
          link.download = '门店支付情况.xlsx';
          document.body.appendChild(link);
          //模拟点击事件
          link.click();
        }).finally(() => {
          this.exportLoading = false;
        })
      }
    }
  };
</script>
<style lang="less" scoped>
  .toptitle {
    border: 1px solid #e0e0e0;
    border-bottom: 2px solid #188097;
    background: #f5f5f5;
    line-height: 35px;
    margin-bottom: 10px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: bold;
  }

  .el-form-item .el-select {
    width: 100%;
  }
</style>
